<template>
    <div class="container">
        <main-menu-vue class="menu" ref="menu"></main-menu-vue>
        <div class="view">
            <div class="header">
                <span class="header-trigger" @click="collapse">
                    <el-icon :size="19" class="icon">
                        <component :is="isCollapse ? Expand : Fold" />
                    </el-icon>
                </span>
                <span> 投资项目经济评价原型系统v1.0 </span>
              <span style="margin-left: 200px"><el-button @click="exit(); this.$router.push('/login');">登出</el-button></span>
              <span style="margin-left: 20px"><el-button type="danger" @click="shutdown()">关闭服务</el-button></span>
            </div>
            <el-scrollbar style="background-color: #f2f3f5">
                <router-view />
            </el-scrollbar>
        </div>
    </div>
</template>
<script setup lang="ts">
//import { ipcRenderer } from "electron";
import { onMounted, ref } from "vue";
import MainMenuVue from "@/components/MainMenu.vue";
import {
    Expand,
    Fold,
    /* Close,
      FullScreen,
      Minus, */
} from "@element-plus/icons-vue";
import userApi from "@/api/user/user"
import { ElMessage } from "element-plus";
// 获取菜单组件实例
const menu = ref();
const isCollapse = ref(false);
console.log(isCollapse.value);
onMounted(() => {
    console.log(menu.value.isCollapse.value);
    isCollapse.value = menu.value.isCollapse.value;
});
// 菜单收缩-扩张
function collapse() {
    menu.value.collapsechange();
    isCollapse.value = menu.value.isCollapse;
}

function exit(){
      document.cookie = "userName=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
      document.cookie = "pwd=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
}

function shutdown(){
  userApi.shutdown();
  ElMessage.success("成功关闭后台服务！");
}

/* function minimize() {
    ipcRenderer.send("minimize");
  }
  function maximize() {
    ipcRenderer.send("maximize");
  }
  function close() {
    ipcRenderer.send("close");
  } */
</script>
<style lang="scss" scoped>
.container {
    height: 100vh;
    width: 100vw;
    display: flex;
}

.view {
    width: calc(100% - 280px);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.header {
    height: 55px;
    line-height: 55px;
    font-size: 18px;
    background-color: white;
    box-shadow: 0 1px 8px rgb(0 21 41 / 8%);
}

.header-trigger {
    height: 55px;
    padding: 0 18px;
    line-height: 55px;
    vertical-align: top;
    display: inline-block;
    cursor: pointer;
    -webkit-transition: all 0.3s, padding 0s;
    transition: all 0.3s, padding 0s;
}

.header-trigger:hover {
    background-color: #fafafa;
}

.header-trigger:active {
    background-color: #e6e8eb;
}

.icon {
    margin-top: 17px;
}
</style>
